<template>
    <view class="category-page">
        <view class="category-content">
            <!-- 左侧一级分类列表 -->
            <scroll-view scroll-y class="category-left">
                <view v-for="item in categoryList" :key="item.id"
                    :class="['category-item', { active: currentCategory.id === item.id }]"
                    @tap="handleCategoryClick(item)">
                    <!-- 左侧一级分类图标 -->
                    <view class="category-icon-wrapper">
                        <image v-if="item.image" class="category-icon" :src="item.image" mode="aspectFill" />
                        <wd-icon v-else name="goods" size="48rpx" color="#666" />
                    </view>
                    <text class="category-name">{{ item.name }}</text>
                </view>
            </scroll-view>

            <!-- 右侧二级分类内容 -->
            <scroll-view scroll-y class="category-right">
                <block v-if="currentCategory.children?.length">
                    <view class="sub-category-group" v-for="subCate in currentCategory.children" :key="subCate.id">
                        <view class="group-header" @tap="handleSubCategoryClick(subCate)">
                            <view class="header-left">
                                <!-- 二级分类头部图标 -->
                                <view class="header-icon-wrapper">
                                    <image v-if="subCate.image" class="header-icon" :src="subCate.image"
                                        mode="aspectFill" />
                                    <wd-icon v-else name="round" size="36rpx" color="#666" />
                                </view>
                                <text class="group-title">{{ subCate.name }}</text>
                            </view>
                            <wd-icon name="arrow-right" size="32rpx" color="#999" />
                        </view>
                        <view class="group-content">
                            <view class="sub-category-item" v-for="child in subCate.children" :key="child.id"
                                @tap="handleSubCategoryClick(child)">
                                <!-- 三级分类图标 -->
                                <view class="category-icon-wrapper">
                                    <image v-if="child.image" class="category-icon" :src="child.image"
                                        mode="aspectFill" />
                                    <wd-icon v-else name="chart-bubble" size="80rpx" color="#666" />
                                </view>
                                <text class="category-name">{{ child.name }}</text>
                            </view>
                        </view>
                    </view>
                </block>
                <view v-else class="empty-tip">
                    <wd-icon name="warn-outline" size="80rpx" color="#999" />
                    <text>暂无分类数据</text>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getCategoryTree } from '@/api/category'

const categoryList = ref([])
const currentCategory = ref({})

const loadCategoryTree = async () => {
    try {
        const res = await getCategoryTree()
        console.log(res)
        categoryList.value = res || []
        if (categoryList.value.length) {
            currentCategory.value = categoryList.value[0]
        }
    } catch (error) {
        console.error('获取分类失败:', error)
    }
}

const handleCategoryClick = (category) => {
    currentCategory.value = category
}

const handleSubCategoryClick = (category) => {
    uni.navigateTo({
        url: `/pages/goods/list?categoryId=${category.id}`
    })
}

onMounted(() => {
    loadCategoryTree()
})
</script>

<style lang="scss" scoped>
.category-page {
    min-height: 100vh;
    background: linear-gradient(180deg, #fff 0%, #f7f8fa 100%);
    display: flex;
    flex-direction: column;

    .category-content {
        flex: 1;
        display: flex;
        overflow: hidden;
    }

    .category-left {
        width: 160rpx;
        height: 100%;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(20rpx);

        .category-item {
            height: 140rpx;
            padding: 16rpx 8rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

            .category-icon-wrapper {
                width: 68rpx;
                height: 68rpx;
                margin-bottom: 10rpx;

                .category-icon {
                    width: 100%;
                    height: 100%;
                    border-radius: 16rpx;
                }
            }

            .category-name {
                font-size: 24rpx;
                color: #666;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                line-height: 1.4;
                text-align: center;
                max-width: 120rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }

            &.active {
                background: rgba(255, 96, 52, 0.08);

                &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    height: 32rpx;
                    width: 4rpx;
                    background: linear-gradient(to bottom, #ff6034, #ff8f44);
                    border-radius: 0 4rpx 4rpx 0;
                }

                .category-icon-wrapper .category-icon {
                    transform: scale(1.05);
                    box-shadow: 0 6rpx 16rpx rgba(255, 96, 52, 0.2);
                }

                .category-name {
                    color: #ff6034;
                    font-weight: 500;
                }
            }
        }
    }

    .category-right {
        flex: 1;
        height: 100%;
        padding: 16rpx;

        .sub-category-group {
            margin-bottom: 20rpx;
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(20rpx);
            border-radius: 24rpx;
            padding: 24rpx;
            box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03);

            .group-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-bottom: 20rpx;
                margin-bottom: 16rpx;
                border-bottom: 1rpx solid rgba(0, 0, 0, 0.03);

                .header-left {
                    display: flex;
                    align-items: center;

                    .header-icon-wrapper {
                        width: 40rpx;
                        height: 40rpx;
                        margin-right: 12rpx;

                        .header-icon {
                            width: 100%;
                            height: 100%;
                            border-radius: 10rpx;
                        }
                    }

                    .group-title {
                        font-size: 28rpx;
                        font-weight: 600;
                        background: linear-gradient(90deg, #333 0%, #666 100%);
                        -webkit-background-clip: text;
                        color: transparent;
                        line-height: 1.4;
                    }
                }

                :deep(.wd-icon) {
                    color: #ddd;
                    transition: all 0.3s ease;
                }

                &:active {
                    :deep(.wd-icon) {
                        transform: translateX(4rpx);
                    }
                }
            }

            .group-content {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 16rpx;

                .sub-category-item {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    padding: 12rpx;
                    transition: all 0.3s ease;

                    .category-icon-wrapper {
                        width: 120rpx;
                        height: 120rpx;
                        margin-bottom: 10rpx;

                        .category-icon {
                            width: 100%;
                            height: 100%;
                            border-radius: 16rpx;
                        }
                    }

                    .category-name {
                        font-size: 24rpx;
                        color: #333;
                        line-height: 1.4;
                        text-align: center;
                        max-width: 120rpx;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }

                    &:active {
                        transform: scale(0.98);

                        .category-icon-wrapper .category-icon {
                            box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
                        }
                    }
                }
            }
        }

        .empty-tip {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 120rpx 0;
            color: #999;
            font-size: 26rpx;

            :deep(.wd-icon) {
                margin-bottom: 16rpx;
                opacity: 0.5;
                font-size: 80rpx;
            }
        }
    }

    .category-icon-wrapper,
    .header-icon-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f7f8fa;
        border-radius: 16rpx;
        transition: all 0.3s ease;

        &:deep(.wd-icon) {
            opacity: 0.9;
        }

        &:active {
            background: #f0f2f5;
        }
    }
}
</style>